<template>
    <div class="mainlandcard f-cb">
        <open-account-pregress></open-account-pregress>
        <div class="mainlandcardbox f-cb">
            <h1>{{$t('m.BasicInformation')}}</h1>
            <div class="tsp">{{$t('m.cardtext')}}</div>
            <div class="idcard f-cb">
                <div class="fl idcardbox">
                    <form action="###" id="positiveForm">
                        <input
                            class="inputfile"
                            type="file"
                            accept="image/png, image/jpeg"
                            title=""
                            @change="uploadPositive"
                        />
                    </form>
                    <img :src="positiveImgUrl" class="card" v-if="positiveImgShow">
                    <span class="idcardBg">
                        <img src="@/assets/img11.png" alt="">
                        <span>{{$t('m.Uploadpositive')}}</span>
                    </span>
                </div>
                <div class="fr idcardbox">
                    <form action="###" id="backForm">
                        <input
                            class="inputfile"
                            type="file"
                            title=""
                            accept="image/png, image/jpeg"
                            @change="uploadbBack"
                        />
                    </form>
                    <img :src="backImgShowUrl" class="card" v-if="backImgShow">
                    <span class="idcardBg">
                        <img src="@/assets/img12.png" alt="">
                        <span>{{$t('m.Uploadnegative')}}</span>
                    </span>
                </div>
            </div>
            <div class="carddemand" v-if="!positiveImgShow && !backImgShow">
                <h1>{{$t('m.text1')}}</h1>
                <div class="tsp">{{$t('m.text2')}}</div>
                <div class="tsp">{{$t('m.text3')}}<span class="blur">{{$t('m.text4')}}</span></div>
                <span>
                    <img src="@/assets/img13_en.png" alt="" class="noneImg" v-if="lang =='en'">
                    <img src="@/assets/img13_tc.png" alt="" class="noneImg" v-else-if="lang =='tc'">
                    <img src="@/assets/img13.png" alt="" class="noneImg" v-else>
                </span>
            </div>
            <div class="positiveInfos" v-if="positiveImgShow">
                <h1>{{$t('m.text5')}}</h1>
                <div class="tsp">{{$t('m.text6')}}</div>
                <el-form ref="positiveInfo" label-position="left" class="demo-ruleForm InfosDB f-cb" label-width="108px" :rules="rules" :model="positiveInfo">
                    <el-form-item :label="$t('m.ChineseName')" class="f-cb" prop="realName">
                        <el-input 
                            v-model="positiveInfo.realName" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.ChineseName')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.EnglishName')" class="f-cb" prop="pinyin">
                        <el-input 
                            v-model="positiveInfo.pinyin" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.EnglishName')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Gender')" class="f-cb" prop="sex">
                        <el-input 
                            v-model="positiveInfo.sex" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Gender')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Ethnic')" class="f-cb" prop="nation">
                        <el-input 
                            v-model="positiveInfo.nation" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Ethnic')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Birth')" class="f-cb" prop="birth">
                        <el-input 
                            v-model="positiveInfo.birth" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Birth')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.IDnumber')" class="f-cb" prop="idCard">
                        <el-input 
                            v-model="positiveInfo.idCard" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.IDnumber')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Address')" class="f-cb" prop="address">
                        <el-input 
                            v-model="positiveInfo.address" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Address')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                </el-form>
            </div>
            <div class="backInfos" v-if="backImgShow">
                <h1>{{$t('m.text7')}}</h1>
                <el-form ref="positiveInfo" label-position="left" class="demo-ruleForm InfosDB f-cb" label-width="108px" :rules="rules" :model="positiveInfo">
                    <el-form-item :label="$t('m.IssuingAuthority')"  class="f-cb" prop="signOffice">
                        <el-input 
                            v-model="positiveInfo.signOffice" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.IssuingAuthority')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Dateofissue')" class="f-cb" prop="signDate">
                        <el-input 
                            v-model="positiveInfo.signDate" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Dateofissue')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                    <el-form-item :label="$t('m.Validity')" class="f-cb" prop="expireDate">
                        <el-input 
                            v-model="positiveInfo.expireDate" 
                            :placeholder="$t('m.Pleaseenter')+$t('m.Validity')"
                            clearable 
                        >
                        </el-input>  
                    </el-form-item>
                </el-form>
            </div>
            <next-back @NextClick="NextClick" @PrevClick="PrevClick"></next-back>
        </div>
    </div>
</template>
<script>
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    import NextBack from "@/components/inc/NextBack.vue"
    import pinyin from "@/common/Convert_Pinyin";
    import {pageFlow,BtnsFlow,uploads,analyse,submit,getsubscript} from "@/common/common";
    export default {
        components: {openAccountPregress,NextBack},
        data() {
            return{
                positiveImgShow:false,
                positiveImgUrl:"",
                backImgShow:false,
                backImgShowUrl:"",
                positiveInfo:{},
                flowinfo:{},
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
                num:0,
                rules:{
                    realName:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.ChineseName')},
                    ],
                    pinyin:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.EnglishName')},
                    ],
                    sex:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Gender')},
                    ],
                    nation:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Ethnic')},
                    ],
                    birth:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Birth')},
                    ],
                    idCard:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.IDnumber')},
                    ],
                    address:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Address')},
                    ],
                    signOffice:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.IssuingAuthority')},
                    ],
                    signDate:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Dateofissue')},
                    ],
                    expireDate:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.Validity')},
                    ],
                }
            };
        },
        mounted(){
            this.flowinfo = JSON.parse(sessionStorage.getItem('flowInfo'))
            this.num = getsubscript(this.flowinfo)
            this.getflow(this.flowinfo.page_flow[this.num])
            window.document.title = this.$t('m.mainlandCard')
        },
        methods:{
            uploadPositive(event) {
                var _this = this;
                let files = event.target.files || event.dataTransfer.files;
                var formDate = new FormData();
                formDate.append("file", files[0]);
                formDate.append("marker", 1);
                uploads(formDate,res => {
                    var res = res.data;
                    if(res.code == 1){
                        this.positiveImgShow=true;
                        this.positiveImgUrl=res.data.url;
                        _this.formdata(res.data.url,'front',true);
                        document.getElementById("positiveForm").reset()
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            uploadbBack(event) {
                var _this = this;
                let files = event.target.files || event.dataTransfer.files;
                var formDate = new FormData();
                formDate.append("file", files[0]);
                formDate.append("marker", 1);
                uploads(formDate,res => {
                    var res = res.data;
                    if(res.code == 1){
                        this.backImgShow=true;
                        this.backImgShowUrl=res.data.url;
                        _this.formdata(res.data.url,'back',true);
                        document.getElementById("backForm").reset()
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            formdata(file, type,marker){
                var formDatef = new FormData();
                formDatef.append("file", file);
                formDatef.append("type", type);
                var _this = this;
                analyse(formDatef,res => {
                    var res = res.data;
                    if(res.code == 1){
                       this.positiveInfo = Object.assign({},this.positiveInfo,res.data)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        if(type == 'back'){
                             this.backImgShow=false;
                            this.backImgShowUrl="";
                        }else{
                            this.positiveImgShow=false;
                            this.positiveImgUrl="";
                        }
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            getflow(page){
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(JSON.stringify(res.data.user_fill) != "{}"){
                            this.positiveInfo = res.data.user_fill;
                            console.log(res.data.user_fill,this.positiveInfo,'55555888')
                            this.positiveImgUrl = res.data.user_fill.frontImg;
                            this.backImgShowUrl = res.data.user_fill.backImg;
                            this.positiveImgShow = true;
                            this.backImgShow = true;
                        }
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            NextClick(){
                var _this = this;
                if(_this.positiveImgUrl == "" || _this.backImgShowUrl==""){
                    _this.$message({
                        message: this.$t('m.PleaseuploadtheID'),
                        type: "warning"
                    })
                    return false;
                }
                var data = {
                    pageId:_this.flowinfo.page_info.id,
                    isModify:Number(sessionStorage.getItem("isModify"))==0?'':Number(sessionStorage.getItem("isModify")),
                    fields:Object.assign({},_this.positiveInfo,{
                        frontImg:_this.positiveImgUrl,
                        backImg:_this.backImgShowUrl,
                    }),
                }
                
                this.$refs['positiveInfo'].validate((valid) => {
                    if (valid) {
                        submit(data,res => {
                            var res = res.data;
                            if(res.code == 1){
                                console.log(res.data,'NextClick')
                                if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[_this.flowinfo.page_flow.length - 1]){
                                    _this.$router.replace({ path:'/examine'});
                                }else{
                                    _this.BtnsFlowBtn()
                                }
                                // _this.BtnsFlowBtn(_this.flowinfo.next_page)
                            }else if(res.code == 401){
                                _this.$router.replace({path:'/'})
                            }else{
                                _this.$message({
                                    message: res.msg,
                                    type: "warning"
                                })
                            }
                        })
                    }
                })
                
                
            },
            PrevClick(){
                var _this = this;
                if(this.flowinfo.page_info.id == this.flowinfo.page_flow[0]){
                    if(Number(sessionStorage.getItem('isModify')) == 1){
                        _this.$router.replace({ path:'/examine'});
                    }else{
                        _this.$router.replace({ path:'/documentType'});
                    }
                }else{
                    _this.BtnsFlowBtn(this.flowinfo.page_flow[this.num - 1])
                }
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        console.log(res,res.data,'res')
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            }
        },
        watch:{

        },
    }
</script>
<style lang="less">
    .mainlandcard{
        .mainlandcardbox{
            width: 460px;
            margin:0 auto;
            h1{
                font-size: 20px;
                font-weight: bold;
                line-height:36px;
                color: @000;
            }
            .tsp{
                font-size: 14px;
                color: @titleColor;
                line-height:22px;
                .blur{
                    color: @hoverColor;
                }
            }
            .noneImg{
                margin-top: 24px;
                max-width: 100%;
            }
            .idcard{
                width: 100%;
                margin-top: 26px;
                .idcardbox{
                    width: 180px;
                    position: relative;
                    .idcardBg{
                        display: block;
                    }
                    .idcardBg img{
                        width: 100%;
                    }
                    .idcardBg span{
                        width: 100%;
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        border-radius: 3px;
                        background: @hoverColor;
                        color: @fff;
                        display: block;
                        margin-top: -18px;
                        z-index: 1;
                        position: relative;
                    }
                    .card{
                        max-width: 150px;
                        max-height: 100px;
                        z-index:2;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform: translate(-50%, -66%);
                        object-fit: cover;
                    }
                    .inputfile {
                        opacity: 0;
                        width: 100%;
                        height: 100%;
                        z-index:3;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }
            .carddemand{
                padding-top: 50px;
            }
            .positiveInfos{
                padding-top: 50px;
            }
            .backInfos{
                padding-top: 52px;
            }
            .InfosDB{
                width: 100%;
                .el-form-item{
                    border-bottom:1px solid @e7e6eb;
                    padding-top: 15px;
                    margin-bottom: 0;
                    width: 100%;
                    .el-form-item__label{
                        font-size: 14px;
                        color: @titleColor;
                        line-height: 41px;
                    }
                    .el-form-item__content{
                        font-size:14px;
                        color: @000;
                        line-height: 41px;
                    }
                    .el-input__inner{
                        font-size: 14px;
                        color: @000;
                        line-height: 41px;
                        border:none
                    }
                }
                
            }
            
        }
    }
</style>